<template>
  <div class="goods-list">
    <div
      class="goods-list-item"
      v-for="(good,index) in goods"
      :key="index"
      @click="goGoodsInfo(good.id)"
    >
      <img
        :src="good.img_url"
        alt
      />
      <h1 class="title">{{good.title}}</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥{{good.sell_price}}</span>
          <span class="old">￥{{good.thumb_path}}</span>
        </p>
        <p class="sell">
          <span>热卖中</span>
          <span>剩余{{good.stock_quantity}}件</span>
        </p>
      </div>
    </div>

    <van-button
      type="danger"
      class="btn"
      @click="getMore"
    >{{moreText}}</van-button>
  </div>
</template>

<script >
export default {
  data: () => ({
    goods: [],
    pageindex: 0,
    hasMore: false,
    pageSize: 4

  }),
  created () {
    this.getgoods()
  },
  methods: {
    async getgoods () {
      if (this.hasMore !== false) return
      this.pageindex++
      // const params = {
      //   pageindex: this.pageindex++,
      //   limit: this.pageSize
      // }
      // const {
      //   data: { status, message, count }
      // } = await this.$axios.get(
      //   `api/getgoods`, { params }
      // )
      const {
        data: { status, message, count }
      } = await this.$axios.get(
        `api/getgoods?pageindex=${this.pageindex}&limit=${this.pageSize}`
      )
      if (status !== 0) this.$Toast(message)
      this.goods = this.goods.concat(message)
      // 计算布尔值
      this.hasMore = this.pageindex * 3 > count
    },
    getMore () {
      this.getgoods()
    },
    goGoodsInfo (id) {
      this.$router.push('/home/goodsinfo/' + id)
    }
  },
  computed: {
    moreText () {
      return this.hasMore ? '被掏空' : '加载更多'
    }
  }
}
</script>
<style lang="less" scoped>
.goods-list {
  // width: 169px;
  display: flex;
  flex: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  box-sizing: border-box;
  justify-content: space-between;
  .goods-list-item {
    width: 48%;
    border: 1px solid #eee;
    margin: 10px 0px 0px 0px;
    // padding: 4px;
    img {
      width: 154px;
      // text-align: center;
    }
    .title {
      font-size: 16px;
    }
    .info {
      .price {
        font-size: 12px;
        .now {
          color: red;
          // display: inline-block;
          // margin:
        }
        .old {
        }
      }
      .sell {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .btn {
    width: 100%;
    margin-top: 10px;
  }
}
</style>
